<template>
    <div class="content">
        <div class="top">
            <ul class="top-ipt">
                <li>
                    <p>楼栋</p>
                    <SelectIpt></SelectIpt>
                </li>
                <li>
                    <p>单元</p>
                    <SelectIpt></SelectIpt>
                </li>
                <li>
                    <p>楼层</p>
                    <SelectIpt></SelectIpt>
                </li>
                <li>
                    <p>房间号</p>
                    <SelectIpt></SelectIpt>
                </li>
                <li>
                    <p>状态</p>
                    <SelectIpt></SelectIpt>
                </li>
                <li>

                    <TextIpt>
                        <p>姓名</p>
                    </TextIpt>
                </li>
                <li>

                    <TextIpt>
                        <p>身份证</p>
                    </TextIpt>

                </li>
                <li>

                    <TextIpt>
                        <p>手机号</p>
                    </TextIpt>

                </li>
                <li>
                    <el-button type="primary">查询</el-button>
                </li>
                <li>
                    <el-button type="success">导出</el-button>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <div class="bottom-title">
                <p class="city">阳光城市</p>
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                    alt="">
                <div class="title-item">
                    <p class="item-title">房屋总数</p>
                    <p class="item-number">{{roomCount}}</p>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                    alt="">
                <div class="title-item">
                    <p class="item-title">已入住</p>
                    <p class="item-number">{{moveInCount}}</p>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                    alt="">
                <div class="title-item">
                    <p class="item-title">未入住</p>
                    <p class="item-number">{{roomCount-moveInCount}}</p>
                </div>
            </div>
            <ul class="bottom-items">
                <li v-for="(item, index) in build" :key="index">
                    <div class="bottom-items-top">
                        <p>{{ item.BuildingName }}</p>
                        <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E6%A5%BC%E7%9B%98%E8%A1%A8new/u9460.svg"
                            alt="">
                    </div>
                    <div class="bottom-items-desc">
                        <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%89%A9%E4%B8%9A%E5%A4%A7%E5%B1%8F/1_u2940.png"
                            alt="">
                        <div class="desc-right">
                            <div class="desc-item">
                                <p class="count">房屋总数</p>
                                <p class="number">{{ room[index] }}</p>
                            </div>
                            <div class="desc-item">
                                <p class="count">已入住</p>
                                <p class="number">{{ inRoom[index] }}</p>
                            </div>
                            <div class="desc-item">
                                <p class="count">未入住</p>
                                <p class="number">{{ room[index] - inRoom[index] }}</p>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
import TextIpt from '@/components/TextIpt.vue';
import SelectIpt from '@/components/SelectIpt.vue';
import { mapActions, mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['allData', 'buildData','roomCount','moveInCount'])
    },
    data() {
        return {
            //所有的楼栋数
            build: [],
            //房屋数
            room: [],
            //已入住
            inRoom: [],
        }
    },
    methods: {
        getRoom(str) {
            fetch('http://127.0.0.1/build/buildCount?build=' + str, {
                method: 'GET', // 请求方法
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => res.json()).then(res1 => {
                this.room.push(res1.buildCount)
            }).catch(err => {
                console.log(err);
            })
        },
        getInRoom(str) {
            fetch('http://127.0.0.1/build/inRoom?build=' + str, {
                method: 'GET', // 请求方法
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => res.json()).then(res1 => {
                this.inRoom.push(res1.inRoom)
            }).catch(err => {
                console.log(err);
            })
        },
        ...mapActions(['getList', 'getBuild'])
    },
    components: {
        TextIpt,
        SelectIpt
    },
    mounted() {

        // if (this.allData.length == 0 || this.buildData.length == 0) {
        //     //执行仓库的数据请求

        //     this.getList()
        //     this.getBuild()
        // }


        fetch('http://127.0.0.1/build/all', {
            method: 'GET', // 请求方法
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            }
        }).then(res => res.json()).then(res1 => {
            // console.log(res1);
            this.build = res1
            this.build.forEach(item => {
                this.getRoom(item.BuildingName)
                this.getInRoom(item.BuildingName)
            })
        }).catch(err => {
            console.log(err);
        })
    }
}
</script>

<style scoped>
.top-ipt>>>button {
    width: 75px;
    height: 30px;
}

.top-ipt>>>.el-button {
    /* line-height: 30px; */
    /* padding: 0; */
}

.top-ipt li p {
    white-space: nowrap;
}

.bottom-items li:hover {
    border: 1px solid #96d8fd;
}

.bottom-items {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.bottom-items li {
    border: 1px solid #E4E7ED;
    margin-right: 35px;
    margin-bottom: 20px;
    border-radius: 4px;
    cursor: pointer;
}

.desc-item {
    display: flex;
    margin-bottom: 10px;

}

.bottom-items-desc {
    display: flex;
    align-items: center;
    padding: 15px;
}

.count {
    color: #bcbcbc;
    font-size: 12px;
    min-width: 60px;
}

.number {
    font-size: 12px;
    color: #666;
    min-width: 60px;
    text-align: right;
}

.bottom-items-desc img {
    width: 58px;
    height: 88px;
    margin-right: 30px;
}

.bottom-items-top {
    font-size: 16px;
    color: #666;
    display: flex;
    height: 40px;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid #E4E7ED;
    justify-content: space-between;
}

.bottom-items-top img {
    width: 11px;
    height: 17px;
}

.bottom-title {
    display: flex;
    align-items: center;
    height: 90px;
    width: 82%;
    justify-content: space-between;
    border-bottom: 2px solid #E4E7ED;
    padding-right: 30px;
}

.bottom-title img {
    width: 2px;
    height: 29px;
}

.bottom {
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    padding: 0 30px 80px;
}

.item-title {
    font-size: 12px;
    color: #868686;
}

.city,
.item-number {
    font-size: 20px;
    color: #1E1E1E;
}

.top-ipt li:nth-last-child(2) {
    margin-right: 25px;
}


.top {
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;
}

.top-btn {
    margin-top: 20px;
}

li  button {
    min-width: 82px;
    height: 30px;
    padding: 8px 20px;
   
}

.top-ipt li {
    display: flex;
    align-items: center;
    margin-right: 50px;
    margin-bottom: 20px;
}

/* .top-ipt li p {
    margin-right: 15px;
} */

.top-ipt>>>.el-input__inner {
    width: 150px;
    height: 30px;
    line-height: 30px;
}

.top-ipt>>>.el-input__icon {
    line-height: 30px;
}

.top-ipt>>>.el-select .el-input.is-focus .el-input__inner {
    border-color: #DCDFE6;
}

.top-ipt>>>.el-select .el-input__inner:focus {
    border-color: #DCDFE6;
}

.top-ipt {
    font-size: 13px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
}

.content {
    padding: 10px 30px 0;
    background: #f0f3f8;
    height: 100vh;
    width: 100%;
}
</style>